
<template>
  <div class="godForgetpasswordBox">
  <!-- <div class="godForgetpasswordBox background-godForget"> -->
    
    <!-- 忘记密码 -->
    <div class="godForget" v-if="reminding">
      <div class="godforget-header">
        <h2>忘记密码</h2>
        <div class="godforget-line"></div>
      </div>
      
      <div class="godforgetBox" >
        <img src="../../static/image/forget-email.png" alt="">
        <p>您好，我们将发送验证信至您的邮箱：</p>
        <el-form :label-position="labelPosition" :model="ruleForm" :rules="rules" 
            ref="ruleForm" label-width="100px" class="demo-ruleForm"
        >
            <el-form-item label="邮箱" prop="email" >
                <el-input v-model="ruleForm.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" @click="submitForm('ruleForm')">发送</el-button>
                <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
            </el-form-item>
        </el-form>
      </div>
    </div>    
    <!-- 忘记密码 end -->

    <!--  去邮箱   -->
    <div class="tomailbox" v-if="tomailbox">
      <div class="tomailbox-header">
        <h2>忘记密码</h2>
        <div class="tomailbox-line"></div>
      </div>
      <div class="mailbox">
        <img src="../../static/image/forget-emailSuccess.png" alt="">
        <p>您好，我们您的注册邮箱：<a></a>发送了一份邮件，请注意接收邮件</p>
        <button>去邮箱接收邮件</button>
        <p>请注意查收邮件，并按照邮件中的提示操作，完成安全认证。</p>
        <p>没有收到？请查看邮箱有没有拒收邮件 或 <a>重新发送验证邮件</a></p>
      </div>
    </div>
    <!--  去邮箱 end  -->

    <!-- 返回失败 -->
    <div class="tomailbox" v-if="tomailboxFailed">
      <div class="tomailbox-header">
        <h2>忘记密码</h2>
        <div class="tomailbox-line"></div>
      </div>
      <div class="mailbox">
        <img src="../../static/image/icon-envelope-failed.png" alt="">
        <p>请确认邮箱是否正确可用，并重新尝试验证</p>
        <button @click="mailFailed()">返回</button>
        
      </div>

    </div>
    <!-- 返回失败 end-->


  </div>
</template>
<script>
export default {
  data(){
    return{
      // 表单对齐方式
      labelPosition: 'top',
      ruleForm:{
          email:''
      },
      rules:{
          email: [
              { required: true, message: '请输入邮箱地址', trigger: 'blur' },
              { type:'email', message: '请输入正确的邮箱地址', trigger: ['blur' , 'change']}
          ],
      },
      reminding:true,
      tomailbox:false,
      tomailboxFailed:false,
      


    }
  },
  methods:{
     submitForm(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
              // alert('submit!');
              this.reminding = false;
              this.tomailbox = true;
              console.log('reminding:' + this.reminding)
              console.log('tomailbox:' + this.tomailbox)
          } else {
              console.log('error submit!!');
              return false;
          }
      });
    },

    resetForm(formName) {
        this.$refs[formName].resetFields();
    },

    // 邮箱失败
    mailFailed(){
      this.tomailboxFailed = false;
      this.reminding = true;
    }
  }
}
</script>

